<template>
  <div class="mod_box">

    <el-row>
      <el-col style="text-align: center;">
        <el-input
          v-model.trim="searchMess"
          placeholder="输入名称"
          :style="'width:50%;margin:5px 0px;'"
          @keyup.enter.native="fetchData(1)"
        >
          <el-button slot="append" @click="fetchData(1)">搜索</el-button>
        </el-input>
      </el-col>
    </el-row>

    <el-row class="mod_title">
      <el-col :sm="4">
        <div class="g-title">司机数目（{{total}}个）</div>
      </el-col>
      <el-col :sm="20" style="text-align: right;">
        <el-button type="primary" @click="add" size="small">新增</el-button>
        <el-button type="warning" @click="edit" size="small">修改</el-button>
        <el-button type="danger" @click="del" size="small">删除</el-button>
        <!-- <el-button type="info" @click="link" size="small">关联账号</el-button> -->
      </el-col>
    </el-row>

    <el-table
      ref="multipleTable"
      :data="listData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" label="序号"></el-table-column>
      <!-- <el-table-column prop="trueName" label="驾驶员姓名" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="driverCode" label="驾驶证号" width="120" align="center"></el-table-column>
      <el-table-column prop="drivingType" label="驾驶车型" align="center"></el-table-column>
      <el-table-column prop="userLoginName" label="默认账号" width="120" align="center"></el-table-column>
      <el-table-column prop="userPwd" label="默认密码" width="120" align="center"></el-table-column>
      <el-table-column prop="handSet" label="手机号" width="120" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="createDate" label="创建时间" width="120" align="center"></el-table-column> -->
      <el-table-column prop="user.username" label="姓名" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="user.companyName" label="所属单位" width="120" align="center"></el-table-column>
      <el-table-column prop="user.zw" label="职务" align="center"></el-table-column>
      <el-table-column prop="user.mobile" label="手机号" width="120" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="user.phone" label="办公电话" width="120" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="user.loginname" label="默认账号" width="120" align="center"></el-table-column>
      <el-table-column prop="user.pwd" label="默认密码" width="120" align="center"></el-table-column>
      <el-table-column prop="user.deptName" label="内设机构" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="user.roleNames" label="角色" show-overflow-tooltip align="center"></el-table-column>
    </el-table>

    <el-row style="padding: 32px 16px;">
      <el-col>
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="pageSize"
          :total="total"
          :current-page="pageNo"
          @current-change="fetchData"
          @size-change="pageSizeChange"
        ></el-pagination>
      </el-col>
    </el-row>

    <el-dialog
      title="司机信息"
      ref="tableDialog"
      :visible.sync="dialogVisible"
      width="80%"
      v-if="formData"
    >
      <el-form :model="formData" label-width="120px" :rules="formRules" ref="form">
        <el-row>
          <el-col :sm="8" v-if="!driverId">
            <el-form-item label="账号" prop="loginname">
              <el-input v-model="formData.loginname" placeholder="请输入账号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="8" v-if="!driverId">
            <el-form-item label="密码" prop="pwd">
              <el-input show-password v-model="formData.pwd" placeholder="请输入密码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="8" v-if="!driverId">
            <el-form-item label="单位" prop="companyId">
              <el-select
                v-model="formData.companyId"
                filterable
                placeholder="请选择"
                style="width: 100%;"
              >
                <el-option
                  v-for="item in company"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :sm="8">
            <el-form-item label="驾驶员姓名" prop="trueName">
              <el-input v-model="formData.trueName" placeholder="请输入驾驶员姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="8">
            <el-form-item label="手机号" prop="handSet">
              <el-input v-model="formData.handSet" placeholder="请输入手机号"></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :sm="8">
            <el-form-item label="性别" prop="sex">
              <el-select v-model="formData.sex" placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="item in [{value: 0,label: '男'}, {value: 1,label: '女'}]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :sm="8">
            <el-form-item label="出生日期" prop="birthday">
              <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%;"
                v-model="formData.birthday"
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :sm="8">
            <el-form-item label="职称" prop="jobTitle">
              <el-input v-model="formData.jobTitle" placeholder="请输入职称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="8">
            <el-form-item label="身份证号" prop="cardCode">
              <el-input v-model="formData.cardCode" placeholder="请输入身份证号"></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :sm="8">
            <el-form-item label="驾驶证号" prop="driverCode">
              <el-input v-model="formData.driverCode" placeholder="请输入驾驶证号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :sm="8">
            <el-form-item label="准驾车型" prop="drivingTypeId">
              <el-select v-model="formData.drivingTypeId" placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="item in driverTypes"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer" style="text-align: left;">
        <el-button type="primary" @click="save">保存数据</el-button>
        <el-button @click="resetForm">重置表单</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
.mod_box {
  padding: 20px;
}
.mod_title {
  padding: 20px 0;
  .g-title {
    height: 20px;
    padding-left: 8px;
    line-height: 22px;
    font-size: 16px;
    font-weight: 400;
    border-left: 2px solid #f54e40;
    margin: 10px 0;
    display: inline-block;
  }
  .eluploadwrapper {
    display: inline-block;
    margin: 0 10px;
  }
}

.el-table th {
  background-color: #f5f7fa;
}

.el-dialog {
  -webkit-transform: none;
  transform: none;
  left: 0;
  position: relative;
  margin: 0 auto;
  background: #eef1f6;
  .el-dialog__body {
    background-color: #fff;
    margin: 0px 10px;
  }
}
</style>
<script>
import { axios } from "@/api/axios";
import { mapGetters } from "vuex";
export default {
  data: function() {
    return {
      searchMess: "",
      total: 0,
      pageNo: 1,
      pageSize: 10,
      listData: [], //全部数据
      listDataSelected: [], //选中数据
      dialogVisible: false,
      driverId: null,
      formData: null,
      driverTypes: {},
      company: {},
      //表单验证
      formRules: {
        loginname: [
          {
            required: true,
            validator: this.checkName,
            trigger: "blur"
          }
        ],
        pwd: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }
        ],
        companyId: [
          {
            required: true,
            message: "请选择单位",
            trigger: "blur"
          }
        ],
        handSet: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur"
          }
        ],
        trueName: [
          {
            required: true,

            message: "请输入驾驶员姓名",
            trigger: "blur"
          }
        ],
        dxhgwnum: [
          {
            required: true,
            message: "请输入定向化岗位人数",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    this.fetchData();
  },
  computed: {
    ...mapGetters(["userInfo", "selectedComIds"])
  },
  watch: {
    //监听左侧单位勾选 重新获取数据
    selectedComIds() {
      this.pageNo = 1;
      this.fetchData();
    }
  },
  methods: {
    //获取单位列表
    fetchDwList() {
      var url = "/admin/yg/dwListJson.do";
      axios(url, "get", {
        companyId: this.userInfo.comid
      }).then(data => {
        this.company = data;
        console.log(this.company);
      });
    },
    fetchDrData() {
      var param = {};
      if (this.driverId) {
        param = {
          driverId: this.driverId
        };
      } else {
        this.fetchDwList();
      }
      axios("/admin/driver/findDetails.do", "get", param).then(data => {
        if (data.error == 1) {
          this.$message.error("系统出错");
        } else {
          if (this.driverId) {
            this.formData = {
              id: this.driverId,
              trueName: data.driver.trueName,
              driverCode: data.driver.driverCode,
              drivingTypeId: data.driver.drivingTypeId,
              handSet: data.driver.handSet
            };
          } else {
            this.formData = {
              loginname: null,
              pwd: null,
              companyId: null,
              handSet: null,
              trueName: null,
              driverCode: null,
              drivingTypeId: null
            };
          }
          console.log(this.formData);
          this.driverTypes = data.driverTypes;
        }
      });
    },
    //检查登录名合法性
    checkName(rule, value, callback) {
      if (!value || !value.trim() || value.length == 0) {
        callback(new Error("请输入登录账户"));
      }
      var url = "/admin/checkName.do";
      axios(url, "get", {
        name: this.formData.loginname
      }).then(data => {
        if (data) {
          callback();
        } else {
          callback(new Error("账户已存在"));
        }
      });
    },
    save() {
      var formData = JSON.parse(JSON.stringify(this.formData));
      var param = new URLSearchParams();
      for (var key in formData) {
        if (formData[key] instanceof Array) {
          param.append(key, formData[key].join(","));
        } else {
          param.append(
            key,
            typeof formData[key] === "undefined" ? "" : formData[key]
          );
        }
      }
      var url = "/admin/driver/add.do";
      if (this.driverId) {
        url = "/admin/driver/changeDriverById.do";
      }
      this.$refs.form.validate(pass => {
        if (!pass) {
          return;
        } else {
          axios(url, "post", param).then(data => {
            if (data.error == 0) {
              this.$message.success("保存成功");
              this.dialogVisible = false;
              this.fetchData();
            } else {
              this.$message.error("保存失败");
            }
          });
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
    },
    //新增
    add() {
      this.driverId = null;
      this.dialogVisible = true;
      this.fetchDrData();
    },
    //编辑
    edit() {
      if (this.listDataSelected.length == 0) {
        this.$message("请选择");
        return;
      }
      this.driverId = this.listDataSelected[0].id;
      this.dialogVisible = true;
      this.fetchDrData();
    },
    //删除
    del() {
      if (this.listDataSelected.length == 0) {
        this.$message("请选择");
        return;
      }
      this.$confirm("是否确定删除账号?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let url = "/admin/delUsers.do";
          let userIds = this.listDataSelected
            .map(function(e) {
              return e.userid;
            })
            .join(",");

          axios(url, "get", { uIds: userIds }).then(data => {
            console.log(data);
            if (data.error == 0) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.fetchData();
            } else {
              this.$message.warning("操作失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    link() {
      if (this.listDataSelected.length == 0) {
        this.$message("请选择");
        return;
      }
    },
    pageSizeChange(newSize) {
      this.pageSize = newSize;
      this.fetchData(1);
    },
    async fetchData(pageNo) {
      if (pageNo) {
        this.pageNo = pageNo;
      }
      let params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        username: this.searchMess,
        companyId: this.userInfo.comid,
        comIds: this.selectedComIds.join(",")
      };
      let data = await axios("/admin/driver/listJson.do", "get", params);
      this.listData = data.data;
      this.total = data.total;
      this.listDataSelected.splice(0);
    },
    //表格多选
    handleSelectionChange(val) {
      this.listDataSelected.splice(0);
      val.forEach(e => {
        this.listDataSelected.push(e);
      });
      console.log(this.listDataSelected);
    }
  }
};
</script>